<template>
    <div>
        <!--面包屑导航区域-->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/firsthop' }">首页</el-breadcrumb-item>
            <!--            <el-breadcrumb-item><a href="/">奖项查询</a></el-breadcrumb-item>-->
            <el-breadcrumb-item>全部成绩</el-breadcrumb-item>
        </el-breadcrumb>
        <!--搜索区域-->
        <h2>成绩列表</h2>
        <el-card>
            <el-row :gutter="50"><!--:gutter="20"是每个栅栏之间的距离--->
                <el-col :span=2.2><!--每一个栅栏-->
                    <!--clearable可清空文本框-->
                    <el-input placeholder="请输入姓名" v-model="searchForm.studentName" clearable @clear="getGradeList" style="width:180px">
                    </el-input>
                </el-col>

                <el-col :span=2>
                    <el-button type="primary" icon="el-icon-search" @click="searchGradeByMessage">查找</el-button>
                </el-col>
            </el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[15, 30, 50, 200]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
            <!--用户表格区域-->
            <!--:data="gradeList"是指定用户源-->
            <!--表格区域,border加边框stripe是隔行变色-->

            <el-table  :data="gradeList" style="width: 100%" border stripe><!--这里是要添加API接口的-->
                <el-table-column type="index"></el-table-column><!--索引列-->
                <el-table-column label="学生姓名" prop="studentName"></el-table-column>
                <el-table-column label="学生学号" prop="studentNumber"></el-table-column>
                <el-table-column label="原始分" prop="originalScore"></el-table-column>
                <el-table-column label="赋分" prop="assignScore"></el-table-column>
                <el-table-column label="1" prop="courseGrade"></el-table-column>
                <el-table-column label="2" prop="courseId"></el-table-column>
                <el-table-column label="3" prop="courseIdPlus"></el-table-column>
                <el-table-column  label="操作" width="180">
                    <template slot-scope="scope">
                        <!--修改按钮-->
                        <!--把这一行对应的id值传到处理函数中@click="showEditDialog(scope.row.id)"-->
                        <el-button type="primary"  size="mini" @click="drawer = true"  style="margin-left: 16px;">查看详情</el-button><!--scope.row表示当前这行的用户，用他的id去查询更新-->
                    </template>
                </el-table-column>
            </el-table>


            <!--@size-change="handleSizeChange" 下拉菜单出发这个事件-->
            <!--            @current-change="handleCurrentChange"页码值发生改变触发这个事件-->
            <!--            :current-page="currentPage4" queryInfo里面有pagenum当前展示的是第几页-->
        </el-card>
        <!--添加用户的对话框-->
        <el-dialog
                title="添加成绩"
                :visible.sync="addDialogVisible"
                width="40%"
                @close="addDialogClosed">
            <!--:before-close="handleClose">-->
            <!--内容主体区域,ref是引用对象名-->
            <el-form :model="addForm" :rules=" addFormRules" ref="addFormRef" label-width="70px">
                <el-form-item label="姓名" prop="studentName">
                    <el-input v-model="addForm.studentName" ></el-input>
                </el-form-item>
                <el-form-item label="学号" prop="studentNumber">
                    <el-input v-model="addForm.studentNumber" ></el-input>
                </el-form-item>
                <el-form-item label="成绩" prop="grade">
                    <el-input v-model="addForm.grade" ></el-input>
                </el-form-item>
                <el-form-item label="课程名" prop="courseName">
                    <el-select  placeholder="请选择课程" v-model="addForm.courseName" style="display: block;width:310px;" >
                        <el-option v-for="item in this.courseList"  :value="item.courseName" :label="item.courseName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程号" prop="courseNumber">
                    <el-input v-model="addForm.courseNumber" ></el-input>
                </el-form-item>
                <el-form-item label="学院" prop="college">
                    <el-select v-model="addForm.college" placeholder="请选择学院" style="display: block;" >
                        <el-option label="商学院" value="商学院"></el-option>
                        <el-option label="法学院" value="法学院"></el-option>
                        <el-option label="马克思主义学院" value="马克思主义学院"></el-option>
                        <el-option label="教师教育学院" value="教师教育学院"></el-option>
                        <el-option label="体育学院" value="体育学院"></el-option>
                        <el-option label="人文与传媒学院" value="人文与传媒学院"></el-option>
                        <el-option label="宁波大学昂热大学联合学院/中欧旅游与文化学院" value="宁波大学昂热大学联合学院/中欧旅游与文化学院"></el-option>
                        <el-option label="外国语学院" value="外国语学院"></el-option>
                        <el-option label="潘天寿建筑与艺术设计学院" value="潘天寿建筑与艺术设计学院"></el-option>
                        <el-option label="音乐学院" value="音乐学院"></el-option>
                        <el-option label="古陶瓷艺术学院" value="古陶瓷艺术学院"></el-option>
                        <el-option label="物理科学与技术学院" value="物理科学与技术学院"></el-option>
                        <el-option label="数学与统计学院" value="数学与统计学院"></el-option>
                        <el-option label="材料科学与化学工程学院" value="材料科学与化学工程学院"></el-option>
                        <el-option label="机械工程与力学学院" value="机械工程与力学学院"></el-option>
                        <el-option label="信息科学与工程学院" value="信息科学与工程学院"></el-option>
                        <el-option label="土木与环境工程学院" value="土木与环境工程学院"></el-option>
                        <el-option label="海运学院" value="海运学院"></el-option>
                        <el-option label="食品与药学学院" value="食品与药学学院"></el-option>
                        <el-option label="医学院" value="医学院"></el-option>
                        <el-option label="继续教育学院/网络教育学院" value="继续教育学院/网络教育学院"></el-option>
                        <el-option label="科学技术学院" value="科学技术学院"></el-option>
                        <el-option label="国际交流学院" value="国际交流学院"></el-option>
                        <el-option label="阳明学院" value="阳明学院"></el-option>
                        <el-option label="其它" value="其它"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业" prop="major">
                    <el-input v-model="addForm.major" ></el-input>
                </el-form-item>
            </el-form>
            <!--底部按钮区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button><!--点击取消隐藏对话框-->
                <el-button type="primary" @click="addGrade">确 定</el-button><!--点击确定也会隐藏对话框-->
            </span>
        </el-dialog>
        <!--修改用户的对话框-->
        <el-dialog
                title="修改成绩"
                :visible.sync="editDialogVisible"
                width="40%"
                @close="editDialogClosed">
            <!--:before-close="handleClose">-->
            <!--内容主体区域,ref是引用对象名-->
            <el-form :model="editForm" :rules=" editFormRules" ref="editFormRef" label-width="70px">
                <el-form-item label="姓名" prop="studentName">
                    <el-input v-model="editForm.studentName" ></el-input>
                </el-form-item>
                <el-form-item label="学号" prop="studentNumber">
                    <el-input v-model="editForm.studentNumber" ></el-input>
                </el-form-item>
                <el-form-item label="成绩" prop="grade">
                    <el-input v-model="editForm.grade" ></el-input>
                </el-form-item>
                <el-form-item label="课程名" prop="courseName">
                    <el-select  placeholder="请选择课程" v-model="editForm.courseName" style="display: block;width:310px;" >
                        <el-option v-for="item in this.courseList"  :value="item.courseName" :label="item.courseName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程号" prop="courseNumber">
                    <el-input v-model="editForm.courseNumber" ></el-input>
                </el-form-item>
                <el-form-item label="学院" prop="college">
                    <el-select v-model="editForm.college" placeholder="请选择学院" style="display: block;" >
                        <el-option label="商学院" value="商学院"></el-option>
                        <el-option label="法学院" value="法学院"></el-option>
                        <el-option label="马克思主义学院" value="马克思主义学院"></el-option>
                        <el-option label="教师教育学院" value="教师教育学院"></el-option>
                        <el-option label="体育学院" value="体育学院"></el-option>
                        <el-option label="人文与传媒学院" value="人文与传媒学院"></el-option>
                        <el-option label="宁波大学昂热大学联合学院/中欧旅游与文化学院" value="宁波大学昂热大学联合学院/中欧旅游与文化学院"></el-option>
                        <el-option label="外国语学院" value="外国语学院"></el-option>
                        <el-option label="潘天寿建筑与艺术设计学院" value="潘天寿建筑与艺术设计学院"></el-option>
                        <el-option label="音乐学院" value="音乐学院"></el-option>
                        <el-option label="古陶瓷艺术学院" value="古陶瓷艺术学院"></el-option>
                        <el-option label="物理科学与技术学院" value="物理科学与技术学院"></el-option>
                        <el-option label="数学与统计学院" value="数学与统计学院"></el-option>
                        <el-option label="材料科学与化学工程学院" value="材料科学与化学工程学院"></el-option>
                        <el-option label="机械工程与力学学院" value="机械工程与力学学院"></el-option>
                        <el-option label="信息科学与工程学院" value="信息科学与工程学院"></el-option>
                        <el-option label="土木与环境工程学院" value="土木与环境工程学院"></el-option>
                        <el-option label="海运学院" value="海运学院"></el-option>
                        <el-option label="食品与药学学院" value="食品与药学学院"></el-option>
                        <el-option label="医学院" value="医学院"></el-option>
                        <el-option label="继续教育学院/网络教育学院" value="继续教育学院/网络教育学院"></el-option>
                        <el-option label="科学技术学院" value="科学技术学院"></el-option>
                        <el-option label="国际交流学院" value="国际交流学院"></el-option>
                        <el-option label="阳明学院" value="阳明学院"></el-option>
                        <el-option label="其它" value="其它"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业" prop="major">
                    <el-input v-model="editForm.major" ></el-input>
                </el-form-item>
            </el-form>
            <!--底部按钮区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button><!--点击取消隐藏对话框-->
                <el-button type="primary" @click="addGrade">确 定</el-button><!--点击确定也会隐藏对话框-->
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "1",
        data() {
            //验证邮箱的规则
            var checkEmail = (rule, value, cb) => {
                //验证邮箱的正则表达式
                const regEmail = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
                if (regEmail.test(value)) {
                    return cb()
                }
                cb(new Error('请输入合法的邮箱'))
            }
            var checkMobile = (rule, value, cb) => {
                //验证手机号的正则表达式
                const regMobile = /^1[3456789]\d{9}$/
                if (regMobile.test(value)) {
                    return cb()
                }
                cb(new Error('请输入合法的手机号'))
            }
            return {
                //获取用户列表的参数对象
                queryInfo: {
                    query: '',
                    //当前所在的页数
                    pageNum: 1,
                    //当前每页显示多少条数据
                    pageSize: 15
                },
                searchForm:{
                    studentName:'',
                },
                gradeList: [],
                courseList: [],
                searchFormForMysql:{
                    studentName:'',
                },
                total: 0,
                addDialogVisible: false,
                setRoleDialogVisible: false,
                addForm: {},//添加用户的表单数据
                addFormRules: {
                    username: [
                        //不知道为啥，下面这行有点问题，怎么输出都输出请输入用户名
                        {required: true, message: '请输入用户名', trigger: 'blur'},//鼠标移开不填的情况
                        {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},//鼠标移开不填的情况
                        {min: 6, max: 15, message: '长度在 6 到 15 个字符之间', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},//鼠标移开不填的情况
                        // {validator: checkEmail, trigger: 'blur'}
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},//鼠标移开不填的情况
                        // {validator: checkMobile, trigger: 'blur'}//上面定义的正则表达式
                    ]
                },//添加表单的验证规则对象
                //控制修改用户对话框的显示与隐藏
                editDialogVisible: false,
                //点修改用户对话框会先要查询用户的信息，这里存查询到的用户信息对象
                editForm: {},
                //修改表单的验证规则对象
                editFormRules: {
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},//鼠标移开不填的情况
                        // {validator: checkEmail, trigger: 'blur'}这个是用来写邮箱的，可以会有小问题
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},//鼠标移开不填的情况
                        // {validator: checkMobile, trigger: 'blur'}//上面定义的正则表达式
                    ]
                },
                //需要被分配角色的用户信息
                userInfo: {},
                //所有角色的数据列表
                rolesList: {},
                //已选中的角色id值
                selectedRoleId: ''
            }
        },
        created() {
            //this.getCourseList()
            this.getGradeList()
        },
        methods: {
            async computerjidianfen(){
                this.computerMyAvg()//先计算平均分,和计算人数
                //console.log(this.courseList);
                for (var i in this.courseList) {
                    console.log(this.courseList);
                    //console.log(`${i}:${this.courseList[i].courseNumber}`)
                    console.log('算积点分');
                    console.log(`${this.courseList[i].courseNumber}`)
                    const {data: res} = await this.$http.post('computerjidianfen',this.$qs.stringify({
                        courseNumber:`${this.courseList[i].courseNumber}`
                    }))


                }
                this.getGradeList()

            },
            async computerMyAvg() {
                console.log('计算平均分');
                console.log(this.courseList);
                for (var i in this.courseList) {
                    // console.log(`${i}:${this.courseList[i].courseNumber}`)
                    //console.log(`${this.courseList[i].courseNumber}`)
                    const {data: res} = await this.$http.post('computerMyAvg',this.$qs.stringify({
                        courseNumber:`${this.courseList[i].courseNumber}`
                    }))
                }
                const {data: res} = await this.$http.post('computerMyVariance')
            },
            async searchGradeByMessage(){
                this.searchFormForMysql.studentName=this.searchForm.studentName;
                if(this.searchForm.studentName===""){
                    this.searchFormForMysql.studentName="%";
                }
                //console.log(this.searchForm);
                console.log("学生名字是");
                console.log(this.searchFormForMysql.studentName);
                const {data: res} = await this.$http.post('searchExamResByMessage',this.$qs.stringify(this.searchFormForMysql))//这里用get的话传到后端收到的数据是null
                this.gradeList = res.data;
            },
            async getCourseList() {
                const {data: res} = await this.$http.get('getCourse')
                this.courseList = res.data
            },
            clearCollge(){
                this.searchForm.college=""
            },
            clearCourse(){
                this.searchForm.courseName=""
            },
            async getGradeList() {
                const {data: res} = await this.$http.get('allExamRes', {
                    params: this.queryInfo
                })//发起一个axios请求，返回一个promise对象，用async,await优化
                this.gradeList = res.data;
                this.total = res.numbers;//总用户数
            },
            handleSizeChange(newsize) {
                this.queryInfo.pageSize = newsize
                this.getGradeList();//重新发起一次数据请求，把监听到的值保存到queryinfo上面

            },
            handleCurrentChange(newpage) {
                this.queryInfo.pageNum = newpage
                this.getGradeList();//把监听到的值保存到queryinfo上面
            },
            // 控制用户对话框的显示与隐藏
            async userStateChanged(userinfo) {//用来改变状态按钮改变后台的状态

                //修改一般都用putuid表示用户的id
                const {data: res} = await this.$http.put('users/${userinfo.id}/state/${userinfo.mg_state}')
                if (res.meta.status !== 200) {
                    userinfo.mg_state = !userinfo.mg_state//告诉用户失败保证页面状态没有变化
                    return this.$message.error('更新用户失败')
                }
                this.$message.success('更新用户状态成功！')
            },
            //表单项关闭之后会重置-->
            addDialogClosed() {
                this.$refs.addFormRef.resetFields()
            },
            //点击按钮，添加新用户
            async showEditDialog(id) {
                const {data: res} = await this.$http.get("showGradeUpdate?id="+id)
                this.editForm = res//存进editForm这个表单数据对象上
                this.editDialogVisible = true
            },
            //这是监听修改用户对话框的关闭时间
            editDialogClosed() {
                this.$refs.editFormRef.resetFields()//让提示的请输入合法的手机号等重置
            },
            async addGrade(){
                const {data: res} = await this.$http.post('addgrade', this.addForm)
                this.addDialogVisible = false
                this.$message.success('发布课程成功');
                this.getGradeList()
            },
            //修改用户信息并提交
            editUserInfo() {
                this.$refs.editFormRef.validate(async valid => {
                    // console.log(valid);//editFormRef是引用对象，valid为true表示预校验通过，false表示不通过
                    if (!valid) return
                    //发起修改用户信息的数据请求
                    const {data:res} = await this.$http.put("editUser",this.editForm);
                    if (res !== "success") return this.$message.error("操作失败！！！");
                    this.$message.success("操作成功！！！");
                    //隐藏
                    this.editDialogVisible = false;
                    this.getgradeList();
                });
            },
            //这是根据id删除用户的信息
            async removeGradeById(id) {
                console.log('id是')
                console.log(id);
                const res = await this.$confirm('此操作将永久删除该成绩，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)//捕获错误
                // console.log("如果用户点击确定，删除,返回一个文本，字符串confirm，如果用户取消了删除，则返回值为字符串console");
                // console.log(res);
                if (res !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const {data: res2} = await this.$http.delete("deleteGrade?id=" + id)
                this.$message.success('删除成绩成功')
                this.getGradeList()//重新获取用户列表
            },
            //展示分配角色的对话框
            async setRole(userInfo) {
                this.userInfo = userInfo

                //在展示对话框之前，获取所有角色的列表
                const {data: res} = await this.$http.get('roles')
                if (res.meta.status !== 200) {
                    return this.$message.error('获取角色列表失败')
                }
                this.rolesList = res.data
                this.setRoleDialogVisible = true
            },
            //点击按钮，分配角色
            async saveRoleInfo() {
                if (!this.selectedRoleId) {
                    return this.$message.error('请选择要分配的角色！')
                }

                const {data: res} = await this.$http.put(
                    `users/${this.userInfo.id}/role`,
                    {
                        rid: this.selectedRoleId
                    }
                )

                if (res.meta.status !== 200) {
                    return this.$message.error('更新角色失败！')
                }
            },
            //监听分配角色对话框的关闭事件
            setRoleDialogClosed(){
                this.selectedRoleId='',
                    this.userInfo=''
            }
        }
    }
</script>

<style scoped>

</style>